<script setup lang="ts">
// -- imports
import { onMounted, reactive } from "vue";
import AppHeader from "@/components/@lgs/AppHeader/AppHeader.vue";
import NoData from "@/components/@lgs/NoData/NoData.vue";
import { api } from "@/api/apiServer";
import Tools from "@likg/tools";

interface StateProps extends API.ListProps<any[] | null> {}

// -- state
const state = reactive<StateProps>({
  page: 1,
  data: null,
  type: "refresh",
  isRefreshing: false,
  isLoading: false,
  isFinished: false,
});

// -- constants
const env = Tools.getEnv();

// -- methods
const getDataSource = async () => {
  const resp = await api.getDiscountList({
    pageNum: state.page,
    pageSize: 20,
  });
  const { current, total, records } = resp.data;
  // 处理数据
  if (state.type === "refresh" || state.data === null) {
    state.data = records;
    state.isRefreshing = false;
  } else {
    state.data = [...state.data!, ...records];
    state.isLoading = false;
  }
  state.isFinished = (state.data as any).length >= total;
};
// -- events
const onRefresh = () => {
  state.page = 1;
  state.type = "refresh";
  getDataSource();
};
const onLoad = () => {
  state.page += 1;
  state.type = "load";
  getDataSource();
};

onMounted(() => {
  getDataSource();
});
</script>

<template>
  <div class="page">
    <app-header
      v-if="env !== 'weixin'"
      title="抵扣金详情"
      :showBack="true"
      :show-status-bar="false"
    />
    <van-pull-refresh v-model="state.isRefreshing" @refresh="onRefresh">
      <template v-if="state.data">
        <van-list
          v-model:loading="state.isLoading"
          finished-text="没有更多了~"
          :finished="state.isFinished"
          :offset="50"
          :immediate-check="false"
          @load="onLoad"
          style="margin-top:10px"
        >
          <template v-if="state.data.length > 0">
            <div
              class="item border-bottom px-15 py-20" style="border-color: #97979720;"
              v-for="(item, index) in state.data"
              :key="index"
              :data="item"
            >
              <div>
                <div class="f15 f-500 mr-14 lh-20" style="color: #070707">
                  抵扣金详情
                </div>
                <div class="f14 mt-11" style="color: #7F8086">
                  有效期至：{{ item.expireEndTime }}
                </div>
              </div>
              <div class="f14 ff-DIN-Regular" style="color: #F59A23">{{ item.pointFaceValue }}</div>
            </div>
          </template>
          <no-data v-else />
        </van-list>
      </template>
      <van-loading v-else color="#F59A23" vertical>加载中...</van-loading>
    </van-pull-refresh>
  </div>
</template>

<style lang="less" scoped>
.van-pull-refresh {
  min-height: 600px;
}
.van-loading {
  margin-top: 120px;
}
.item {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
</style>
